<template>
	<view class="mine">
		<!-- 用户信息 -->
		<user-info></user-info>
		<!-- 用户其他信息 -->
		<view class="user-other-info">
			<view class="pay-list">
				<view v-for="(item,index) in pay_list" :key="index" class="item" @click="goOrder(item.id)">
					<view class="iconfont" :class="[item.icon,index<3?'badge':'']"></view>
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="center-list">
				<view class="study-aid" @click="goZhuXue">助学中心</view>
				<view class="share">分享中心</view>
				<view class="collect">领劵中心</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="left iconfont" :class="item.icon"></view>
					<text>{{item.title}}</text>
					<view class="right iconfont icon-you-jiantou"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userInfo from "../../components/user-info.vue"
	export default {
		data() {
			return {
				pay_list: [
					{
						id: 1,
						title: "待付款",
						icon: "icon-fukuan"
					},
					{
						id: 2,
						title: "待消费",
						icon: "icon-xiaofei"
					},
					{
						id: 3,
						title: "待评价",
						icon: "icon-pingjia"
					},
					{
						id: 0,
						title: "全部订单",
						icon: "icon-single"
					}
				],
				list: [
					{
						title: "我的拼团",
						icon: "icon-pintuan"
					},
					{
						title: "我的游记",
						icon: "icon-youji"
					},
					{
						title: "我的结伴",
						icon: "icon-partner"
					},
					{
						title: "我的收藏",
						icon: "icon-shoucang"
					},
					{
						title: "我的咨询",
						icon: "icon-zixun"
					},
					{
						title: "常用信息",
						icon: "icon-Group-"
					}
				]
			}
		},
		components: {
			userInfo
		},
		methods: {
			goZhuXue() {
				uni.navigateTo({
					url: "/pages/zhuxue/zhuxue"
				})
			},
			goOrder(id) {
				uni.navigateTo({
					url: "../order/order?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.mine {
		.user-other-info {
			background-color: #eeeeee;
			overflow: hidden;
			.pay-list {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: rpx(15) rpx($uni-margin-left) 0;
				border-radius: rpx(4);
				height: rpx(100);
				.item {
					text-align: center;
					view {
						position: relative;
						font-size: rpx(40);
						font-weight: bold;
						&.badge::after {
							content: "";
							display: block;
							position: absolute;
							right: 0;
							top: 0;
							transform: translateX(100%);
							width: rpx(8);
							height: rpx(8);
							border-radius: rpx(4);
							background-color: #ff0000;
						}
					}
					text {
						display: block;
						font-size: rpx(16);
						margin-top: rpx(8);
					}
				}
			}
			.center-list {
				display: flex;
				flex-wrap: wrap;
				margin: 0 rpx($uni-margin-left);
				justify-content: space-between;
				view {
					flex: 1;
					border-radius: rpx(4);
					line-height: rpx(80);
					text-align: center;
					color: #fff;
					font-size: rpx(20);
					margin-top: rpx(15);
					&:not(:last-child) {
						margin-right: rpx(10);
					}
				}
				.study-aid {
					background-color: #4bdac3;
				}
				.share {
					background-color: #357fe1;
				}
				.collect {
					background-color: #f0b562;
				}
			}
			.list {
				margin: rpx(15) rpx($uni-margin-left);
				border-radius: rpx(4);
				background-color: #fff;
				border: 1px solid #ddd;
				.list-item {
					position: relative;
					display: flex;
					height: rpx(50);
					line-height: rpx(50);
					padding: 0 rpx(18);
					.left {
						font-size: rpx(24);
						color: #ccc;
					}
					text {
						font-size: rpx(16);
						margin-left: rpx(10);
					}
					.right {
						color: #eee;
						position: absolute;
						right: rpx(18);
						top: 0;
						font-size: rpx(26);
					}
					&:not(:last-child) {
						border-bottom: 1px solid #ddd;
					}
				}
			}
		}
	}
</style>
